<template>
	<view class="ys" :style="{'--bg':'url(/static/index/ibg.png)'}">
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods,index) in list" :key="goods.id" @tap="toGoods(goods)">
					<image :src="goods.goods[0].goods_info.cover_path"></image>
					<view class="name">{{goods.goods[0].goods_name}}</view>
					<view class="roles">{{goods.roles[0]}}</view>
					<view class="info">
						<view class="price">￥{{goods.goods[0].total_price}}</view>
					</view>
					<view class="info">
						<view class="slogan">{{goods.goods[0].total_num}}个账号</view>
						<view class="buy" @click.stop="receiving(goods,index)" v-if="goods.allow_accept">
							接单
						</view>
						<view class="status" v-else>
							{{goods.state_text}}
						</view>
					</view>
				</view>
			</view>
			<view class="no-list" v-if="list.length==0">- 暂无数据 -</view>
		</view>
	</view>
</template>

<script>
	import {
		orderHall,
		acceptOrder
	} from "@/api/api.js"
	export default {
		data() {
			return {
				list: [],
				loadingText: "搜索中...",
				headerTop: "0px",
				headerPosition: "fixed",
				page: 1,
				flag: false,
				name: '',
				last_page: 1,
				id: '',
				type: ''
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			if (e.type) {
				this.type = e.type
			}
			this.orderHall()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.orderHall()
			}
		},
		methods: {
			receiving(item, index) {
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '是否立即接单?',
					success(res) {
						if (res.confirm) {
							acceptOrder({
								order_id: item.id
							}).then(res => {
								uni.$showMsg(res.msg)
								if (res.code == 0) {
									setTimeout(() => {
										this.list.splice(index, 1)
									}, 800)
								}
							})
						}
					}
				})
			},
			//商品跳转
			toGoods(e) {
				if (e.allow_accept) {
					uni.navigateTo({
						url: '/pages/goodsdetail/orderdetail?id=' + e.id
					});
				} else {
					uni.$showMsg('该订单' + e.state_text)
				}
			},
			orderHall() {
				orderHall({
					page: this.page,
					category_id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.list = this.list.concat(res.data.data)
						this.last_page = res.data.last_page
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.ys {
		--bg: '';
		height: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		padding: 0 0 10px 0;
		box-sizing: border-box;
		position: relative;
		background-color: #050B18;

		&::before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: var(--bg);
			background-size: cover;
			opacity: .05;
		}
	}

	.icon {
		font-size: 26upx;
	}

	.input-box {
		width: 95%;
		height: 60upx;
		background-color: #fff;
		border-radius: 30upx;
		position: relative;
		display: flex;
		align-items: center;
		margin: 0 auto;

		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
			width: 85%;
		}
	}

	.header {
		padding: 10px 0;
	}

	.place {
		width: 100%;
		display: flex;
		padding-left: 15px;
		align-items: center;
		color: #979797;
		font-size: 12px;
		background-color: #f7f7f7;
		height: 90upx;

	}

	.goods-list {
		padding-top: 10px;

		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 96%;
			padding: 0 2% 3vw 2%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			position: relative;
			z-index: 1;

			.product {
				width: 49%;
				border-radius: 10upx;
				background-color: #1F2430;
				margin: 0 0 10px 0;
				padding-bottom: 10px;

				image {
					width: 100%;
					border-radius: 10upx 10upx 0 0;
					height: 160px;
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
					padding-bottom: 0;
					font-weight: bold;
					color: #fff;
				}

				.roles {
					width: 92%;
					padding: 0 4%;
					margin-top: 5px;
					font-size: 12px;
					color: #777;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 0 4%;

					.price {
						color: #E0C03F;
						font-size: 32upx;
						font-weight: 600;
						margin-top: 5px;
					}

					.slogan {
						color: #777;
						font-size: 26upx;
					}

					.buy {
						background: #E0C03F;
						width: 45px;
						text-align: center;
						padding: 4px 2px;
						border-radius: 4px;
						font-size: 12px;
						font-weight: bold;
					}

					.status {
						color: #E0C03F;
					}
				}
			}

		}
	}
</style>